<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./plugins/Bootstrap4.6.1/css/bootstrap.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/main.css">
    <!-- 引入组件库 -->
    <script src="./plugins/js/jquery.js"></script>
    <script src="./plugins/Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
    <script src="./plugins/js/vue.js"></script>
    <script src="./plugins/js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <div class="login ml-auto mr-auto mt-5 border rounded">
        <h1 class="alert-success  text-center p-1">登录</h1>
        <form class="login   mx-auto p-3 " action="">
        <div class="form-group">
          <label for="u_phone">手机号</label>
          <input type="tel" class="form-control"  v-model="userinfo.u_phone" id="u_phone" aria-describedby="emailHelp">
          <small  class="form-text text-muted">请输入手机号</small>
        </div>
        <div class="form-group">
          <label for="u_pwd">密码</label>
          <input type="password" class="form-control"  v-model="userinfo.u_pwd" id="u_pwd">
          <small  class="form-text text-muted">请输入6-18位密码,只能是数字字母下划线</small>
        </div>
        <button type="button" class="btn btn-primary" @click="login()">登录</button>
          <a href="./resister.html" class="float-right">还没有账号？ 点这里快速注册！</a>
      </form>
    </div>
  
</div>
</body>


<script>
    new Vue({
        el: '#app',
        data: {
            userinfo:{
                u_phone: '',
                u_pwd:''
            }
        },
        created() {
        },
        methods: {
            login(){
                // 正则验证
                if(!/^1(3|4|5|6|7|8|9|)\d{9}$/.test(this.userinfo.u_phone.trim())){
                    alert("请输入正确的11位手机号！")
                    return;
                }
                if(!/^[A-z0-9_]{6,18}$/.test(this.userinfo.u_pwd.trim())){
                    alert("请正确输入6-18位密码,只能是数字字母下划线");
                    return;
                }

                axios.post("./userinfo.php?action=login",this.userinfo).then(res=>{
                    console.log(res);
                    if (res.data.state!=200){
                        alert(res.data.message)
                    }else {
                        // 登录成功跳转页面
                        window.location.href = 'main.html';
                    }
                })
            }
        }
    })
</script>
</html>